<template>
    <div class="mv">
        <div class="mv_list">
            <ul>
                <li v-for="(item, index) in mvList" :key="index">
                    <div class="info">
                        <img :src="item.imgurl" alt="">
                        <i class="mask"></i>
                        <div class="show">
                            <i title="播放" class="play" @click="$router.push(`/mvlist/${item.id}`)"></i>
                        </div>
                    </div>
                    <p :title="item.name" class="dec ellipsis">{{ item.name }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { ArtistMvApi } from '@/request/api';
export default {
    data () {
        return {
            mvList: [],
            ids: 0,
        }
    },
    computed: {
        id() {
          return this.$route.params.id;
        },
    },
    watch: {
        "$route.params.id": {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal);
                if (newVal != oldVal) {
                    this.$router.go(0);
                }
            }
        }
    },
    created() {
        ArtistMvApi(this.id).then((res) => {
            // console.log(res);
            this.mvList = res.data.mvs;
        });
    },
}   
</script>
 
<style lang = "less" scoped>

@import "../../assets/base.less";
.mv {
    float: left;
    margin-top: 20px;
    .mv_list {
        ul {
            flex-wrap: wrap;
            display: flex;
            justify-content: flex-start !important;
        }
        li {
            width: 137px;
            height: 170px;
            line-height: 1.5;
            margin-right: 30px;
            &:nth-of-type(4n) {
                margin-right: 0;
            }
            .info {
                cursor: pointer;
                position: relative;
                width: 137px;
                height: 107px;
                overflow: hidden;
                img {
                    width: 137px;
                    height: 107px;
                }
                .mask {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 137px;
                    height: 107px;
                    display: block;
                    background: url("../../assets/images/public/coverall.png") no-repeat 0px -1168px;
                }
                .play {
                    position: absolute;
                    top: 31px;
                    left: 46px;
                    width: 44px;
                    height: 44px;
                    display: block;
                    background: url("../../assets/images/public/iconall.png") no-repeat ;
                    background-position: -30px -135px;
                    &:hover {
                        background-position: -30px -85px;
                    }
                }

            }
            .dec {
                cursor: pointer;
                font-size: 14px;
                color: #000;
                &:hover {
                    text-decoration: underline;
                    color: #000;
                }
            }
        }
    }
}
</style>